<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
    <style type="text/css">
        *{
            padding: 0;margin: 0;
        }
        .time{
            height: 200px;width: 200px;border: 5px black solid;margin: 30px auto;border-radius: 50%;position: relative;
        }
        ul{
            list-style-type: none; height: 100%;width: 100%;position: relative;
        }
        .hour{
            height: 40px;width:6px;background: black;left: 50%; top:50%;position: absolute;margin: -40px 0 0 -3px;transform-origin: center bottom;
        }
        .minu{
            height: 70px;width: 4px;background: black;left: 50%;top: 50%;position: absolute;margin: -70px 0 0 -2px;transform-origin: center bottom;
        }
        .secs{
            height: 80px;width: 2px;background: red;left: 50%;top: 50%;position: absolute;margin: -80px 0 0 -1px; transform-origin: center bottom;
        }
        .ball{
            height: 6px; width: 6px;background:red;left:50%; top :50%;position: absolute;border-radius: 6px;margin: -6px 0 0 -3px;
        }
        .text{
            top: 15%;position: absolute;
        }

        ul{
            width: 100%;height: 100%;position: relative;
        }
        li{
            width: 2px; height:5px;left: 50%;top: 0;background: black;transform-origin: center 100px;position: absolute;
        }
    </style>
</head>
<body>
    <div class="day"></div>
    <div></div>
    <div></div>
    <div class="time">
    <ul></ul>
    <div class="text">
        <div class="seiko">SEIKO</div>
        <div></div>
    </div>
        <div class="hour"></div> <!--时针!-->
        <div class="minu"></div> <!--分针!-->
        <div class="secs"></div> <!--秒针!-->
        <div class="ball"></div> <!--基点!-->
    </div>

    <script type="text/javascript">
        var ul=document.querySelector('ul');

        var hour=document.querySelector('.hour');
        var minu=document.querySelector('.minu');
        var secs=document.querySelector('.secs');
        for(i=0;i<60;i++){
            var li=document.createElement('li');
            li.style.transform='rotate('+(i*6)+'deg)';
            if(i%5===0){
                li.style.height='10px';
            }
            ul.appendChild(li);
        } 
        run();
        setInterval(run,1000);
        function run() {
            var time=new Date();
            var iH=time.getHours();
            var iM=time.getMinutes();
            var iS=time.getSeconds();

            hour.style.transform='rotate('+(iH*30+iM/2)+'deg)';
            minu.style.transform='rotate('+(iM*6)+'deg)';
            secs.style.transform='rotate('+(iS*6)+'deg)';

        }
    </script>
</body>
</html>